<template>
    <div class="search">
        <div class="topNav">
            <van-nav-bar left-arrow :border="false" @click-left="onClickLeft()" title="搜索商品">
            </van-nav-bar>
        </div>
        <div class="search-box">
            <van-search icon="scan" size="small" class="menu-search" shape="round" v-model="search">
            </van-search>
            <button size="small" class="search-bt" type="success" @click="getResults()">搜索</button>
        </div>
        <div class="display">
            <div class="menuBox">
                <ul class="menu">
                    <li class="menu-item" v-for="item in results" @click="toDetail(item.id)">
                        <van-image :src="item.image" />
                        <div class="menu-item-info">
                            <span class="menu-item-title">{{ item.name }}</span>
                            <span class="desc">{{ item.description }}</span>
                            <span class="sales">销量：{{ item.sales }}</span>
                            <div class="price">
                                <span class="price1">￥<span class="price2">{{ item.price }}</span></span>
                                <div class="add-cart" @click.stop="add(item)">+</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <van-action-sheet v-model:show="isShow">
        <div class="pop" v-if="product">
            <div class="header">
                <van-image :src="product.image" />
                <div class="detail">
                    <span class="title">{{ product.name }}</span>
                    <span class="price">￥<span class="rmb">{{ product.price }}</span></span>
                </div>
            </div>
            <div class="content">
                <span>购买数量</span>
                <van-field name="stepper">
                    <template #input>
                        <van-stepper v-model="num" theme="round" button-size="32" />
                    </template>
                </van-field>
            </div>
            <div class="foot">
                <van-button type="primary" @click="addCart(product.id, num)">确定</van-button>
            </div>
        </div>
    </van-action-sheet>
    </div>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue';
import axios from '../utils/axios.js'
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()
// 查询关键字
const search = ref(null)
// 查询结果
const results = ref([])
const onClickLeft = () => history.back();
onMounted(()=>{
    console.log(route.query.search);
    search.value = route.query.search
    console.log(search.value);
    getResults()
})
// 查询对应商品
const getResults = ()=>{
    axios.get('/inquire_dish', {params:{
        search: search.value
    }}).then((res)=>{
        results.value = res.data
        console.log(res);
    })
}
// 跳转商品详情页
const toDetail = (goods_id) => {
    router.push(`/goods/${goods_id}`).then(() => {
        window.scrollTo(0, 0);
    });
}
// 购买弹窗
const isShow = ref(false)
// 购买数量
const num = ref(1)
const product = ref('')
const add = (item) => {
    num.value = 1
    isShow.value = true
    product.value = item
}
// 添加商品到购物车
const addCart = (dishid, num) => {
    console.log(dishid, num)
    isShow.value = false
    axios.post('/add_shop', { dishid: dishid, number: num }).then((res) => {
        console.log(res)
    })
}
</script>
<style>
.search{
    background-color: #fff;
}
.display .menuBox .menu-item{
    padding: 0.2rem 0.3rem;
    height: 4rem;

}
.display .menuBox .menu-item .add{
    background-color: #fff;
}
.menu-item-info{
    position: relative;
}
.add-cart{
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #00a73c;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    bottom: 8px;
    right: 15px;
}
</style>